<template>
    <div class="publicwelfarelibrary">
        <my-header></my-header>
        
        <div id="page-bg">
            <div class="banner">
                <img src="http://www.yhachina.com/images/exhibition/exhibition-banner.jpg" alt="">
            </div>
            <div class="exhibition">
                <div id="content">
                    <!-- 左侧的内容 -->
                    <div class="content-left">
                        <div class="public-introduction">
                            <h2>青年旅舍-满天星公益图书馆</h2>
                            <p>青年旅舍遍布城乡，服务舍区、服务青少年，是青年旅舍坚持公益方向，亦是实践其舍会责任的一项重要内容。<a href="https://www.starscn.org/">满天星青少年公益发展中心</a>则专注于在中国欠发达地区选择图书资源匮乏的乡村小学和舍区建立满天星公益图书馆，从而培养乡村孩子的阅读兴趣和阅读习惯，同时提高城市青少年的舍会责任意识。以此共同的公益理想为基础，“青年旅舍·满天星公益图书馆”项目将双方的理念有机结合起来。</p>
                            <p>“青年旅舍·满天星公益图书馆”项目计划在覆盖全国的青年旅舍网络中选择合适的乡村国际青年旅舍作为活动场所，建立起一批针对当地舍区青少年儿童的公益图书馆，以培养当地孩子的阅读兴趣和阅读习惯。同时，我们通过青年旅舍这一平台，动员更多热爱公益、热爱旅行的青年人关注、支持和参与到乡村阅读中来，从而让更多乡村的孩子能找到出色的自我，懂得爱的付出与回馈，共同创造一个丰富多彩的世界！</p>
                            <p><a href="http://www.stars.cn/">点击进入满天星公益官方网站</a><a href="https://www.starscn.org/">www.starscn.org</a></p>
                            <p><strong>青年旅舍·满天星公益图书馆</strong></p>
                            <div><img src="http://www.yhachina.com/upload/image/20180614/1528971699235027.jpg" alt=""><p>广西·兴坪老地方青年旅舍项目</p></div>
                            <p><strong>我想加入</strong></p>
                            <p><a href="http://www.yhachina.com/images/star.rar">申请成为“青年旅舍·满天星公益图书馆”（点击下载资料）</a></p>
                            <p>如果您对该乡村公益图书馆项目感兴趣，有意使您的旅舍加入到该项目中来，请先下载上面的相关文件资料，也欢迎来电、来函联系。邮箱地址： <a href="mailto:event@yhachina.com">event@yhachina.com</a> 。或致电020-87513731。目前该项目仅面向正式加盟中国国际青年旅舍（YHA）的青年旅舍开放。</p>
                        </div>
                    </div>
                    <!-- 右侧的内容 -->
                    <div class="content-right">
                        <ul class="introduction-nav">
                            <li @click="now=0" class="active">旅舍公益</li>
                            <li @click="now=1" :class="{active:now==1}"><router-link to="/socialwelfare">舍会企业 / 公益项目</router-link></li>
                            <li @click="now=2" :class="{active:now==2}"><router-link to="/socialwelfare">可持续发展</router-link></li>
                            <li @click="now=3" :class="{active:now==3}"><router-link to="/publicwelfarelibrary">青年旅舍-满天星公益图书馆</router-link></li>
                        </ul>
                        <div class="block2">
                            <router-link to="/yuding" class="block2-a" href="">
                                <i></i>
                                旅舍预定
                            </router-link>
                            <router-link to="/vip" class="block2-b" href="">
                                <i></i>
                                会员卡
                            </router-link>
                            <router-link to="/join" class="block2-c" href="">
                                <i></i>
                                旅舍加盟
                            </router-link>
                            <a class="block2-d" href="">
                                <img src="../assets/img/block2-4.jpg" alt="">                            
                            </a>
                        </div>

                        </div>
                    </div>
                </div>
        </div>
        <my-footer></my-footer>
    </div>
</template>

<script>
import MyHeader from '../components/MyHeader.vue'
import MyFooter from '../components/MyFooter.vue'
    export default {
        data() {
            return {
                now: 3
            }
        },
        components:{ MyHeader,MyFooter },
    }
</script>

<style lang="scss" scoped>
#page-bg {
    background-color: #f5f5f5;
    .banner {
        img {
            display: block;
            width: 100%;
        }
    }
    .exhibition {
        color: #333;
        position: relative;
        top: -60px;
        z-index: 200;
        width: 1080px;
        margin: 0 auto;
        #content {
            display: flex;
            justify-content: space-between;
            .content-left {
                width: 810px;
                overflow: hidden;
                .public-introduction {
                    background-color: #fff;
                    padding: 25px 50px 100px 50px;
                    
                    h2 {
                        font-size: 30px;
                        margin-bottom: 30px;
                    }
                    p {
                        font-size: 16px;
                        text-align: justify;
                        line-height: 26px;
                        text-indent: 2em;
                        margin-bottom: 14px;
                        strong {
                            font-weight: bold;
                        }
                        a {
                            text-decoration: none;
                            color: #00e;
                        }
                    }
                    div {
                        text-align: center;
                        vertical-align: center;
                        p {
                            text-align: center;
                        }

                    }

                }
            }
            .content-right {
                width: 240px;
                .introduction-nav {
                    margin-bottom: 30px;
                    li {
                        height: 60px;
                        line-height: 60px;
                        padding: 0 20px; 
                        background-color: #fff;    
                        &:first-child {
                            color: #fff;
                            font-weight: bold;   
                            background: none;
                        }                   
                        &.active {
                            background-color: rgba(135, 197, 36, 0.9);
                            a{
                                color: #fff;
                                font-weight: bold;   
                                background: none;                             
                            }                                              
                        }
                        a {
                            color: #333;
                            text-decoration: none;
                            border-bottom: 1px solid #eee;
                            display: block;
                            background: url(http://www.yhachina.com/images/exhibition/introduction-nav-icon.png) no-repeat right center;
                        }
                        &:hover {
                                background-color: rgba(135, 197, 36, 0.7);
                                a {
                                    color: #fff;
                                }
                            }
                    }
                    
                }
                .block2 {
                    a {
                        display: block;
                        text-decoration: none;
                        font-size: 18px;
                        color: #fff;
                        font-weight: bold;
                        height: 80px;
                        line-height: 80px;
                        margin-bottom: 1px;
                        background-image: url(../assets/img/exhibition-r-icon4.png);
                        background-repeat: no-repeat;
                        background-position: right 20px center;
                        border-radius: 5px;
                        &.block2-a {
                            background-color: #87c524;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-389px -422px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-b {
                            background-color: #f7941c;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-419px -422px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-c {
                            background-color: #4b8fcc;
                            i {
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            background-image: url(../assets/img/app_z.png);
                            background-position:-476px -60px ;
                            vertical-align: middle;
                            margin: 0 10px 0 20px;
                        }
                        }
                        &.block2-d {
                            border: none;
                        }

                    }
                }
            }
        }
    }

}
</style>